<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center mb-4" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Explain.Title' | translate: {Default: "Execute Explain"} }}
    </span>
  </div>

  <ul class="ngm-nav-list my-2 flex-1 overflow-auto">
    @for (item of explains; track item.key) {
      <li class="flex group/item px-4 py-2 mb-2 rounded-lg cursor-pointer hover:bg-white/10 active:bg-white/20"
        [class.active]="explain?.key === item.key"
        (click)="activeLink(item)">
        <span class="flex-1">
          @switch (item.type) {
            @case ('dataSettings') {
              {{ 'Story.Explain.DataSettings' | translate: {Default: 'Data Settings'} }}
            }
            @case ('statements') {
              {{ 'Story.Explain.ExecuteStatements' | translate: {Default: 'Execute Statements'} }}
            }
            @case ('data') {
              {{ 'Story.Explain.Data' | translate: {Default: 'Data'} }}
            }
            @case ('error') {
              {{ 'Story.Explain.Error' | translate: {Default: 'Error'} }}
            }
            @case ('chart') {
              {{ 'Story.Explain.ChartOptions' | translate: {Default: 'Chart Options'} }}
            }
            @case ('slicers') {
              {{ 'Story.Explain.Slicers' | translate: {Default: 'Slicers'} }}
            }
          }
        </span>
      </li>
    }
  </ul>

  <div class="flex justify-start items-center">
    <div ngmButtonGroup>
      <button mat-flat-button (click)="close()">
        {{ 'Story.Common.Close' | translate: {Default: 'Close'} }}
      </button>
    </div>
  </div>
</div>

<div class="flex-1 flex flex-col overflow-auto">
  @switch (explain?.type) {
    @case ('dataSettings') {
      <h5 class="px-4 py-2 text-lg sticky top-0 z-10 bg-components-card-bg">
        {{ 'Story.Explain.DataSettings' | translate: {Default: 'Data Settings'} }}:
      </h5>
      <ngm-prism-highlight class="text-sm select-all rounded-lg border-dotted border-2 p-2 m-4"
        [code]="explain.data | omitBlank | json"
        language="json"
      />
    }
    @case ('statements') {
      <div>
        @for (statement of explain.statements; track statement) {
        <div>
          <h5 class="px-4 py-2 text-lg">{{ 'Story.Explain.Statement' | translate: {Default: 'Statement'} }}:</h5>
          <ngm-prism-highlight class="text-sm select-all rounded-lg border-dotted border-2 p-2 m-4"
            [code]="statement"
            language="sql"
            >
          </ngm-prism-highlight>
        </div>
        }
      </div>
    }
    @case ('data') {
      <ngm-table class="ngm-data-preview flex-1 overflow-auto"
        [data]="explain.data"
        [columns]="explain.columns"
      >
      </ngm-table>
    }
    @case ('error') {
      <div>
        <h5 class="px-4 py-2 text-lg">{{ 'Story.Explain.ErrorInfo' | translate: {Default: 'Error Info'} }}:</h5>
        <div class="text-sm select-all rounded-lg border-dotted border-2 p-2 m-4">
          <code>{{ explain.error }}</code>
        </div>
      </div>
    }
    @case ('chart') {
      <div>
        <h5 class="px-4 py-2 text-lg sticky top-0 z-10 bg-components-card-bg">
          {{ 'Story.Explain.Options' | translate: {Default: 'Options'} }}:</h5>
        <ngm-prism-highlight class="text-sm select-all rounded-lg border-dotted border-2 p-2 m-4"
          [code]="explain.options | json"
          language="json"
          maximum="10000">
        </ngm-prism-highlight>
      </div>
    }
    @case ('slicers') {
      <div>
        <h5 class="px-4 py-2 text-lg sticky top-0 z-10 bg-components-card-bg">
          {{ 'Story.Explain.Slicers' | translate: {Default: 'Slicers'} }}:</h5>
        <ngm-prism-highlight class="text-sm select-all rounded-lg border-dotted border-2 p-2 m-4"
          [code]="explain.options | json"
          language="json"
          maximum="10000">
        </ngm-prism-highlight>
      </div>
    }
  }
</div>
